<template>
   <view class="my-userinfo-container">
        <!-- 头像昵称区域 -->
        <view class="top-box">
            <image :src="userinfo.avatarUrl" class="avatar"></image>
            <view class="nickname">>{{userinfo.nickName}}</view>
        </view>
        <!-- 面板的列表区域 -->
        <view class="panel-list">
            <!-- 第一个面板 -->
            <panel-1></panel-1>
            <!-- 第二个面板 -->
            <panel-2></panel-2>
            <!-- 第三个面板 -->
            <panel-3></panel-3>
        </view>
    </view>
</template>

<script>
import { mapState } from 'vuex';
import panel1 from './panel/panel1.vue';
import panel2 from './panel/panel2.vue';
import panel3 from './panel/panel3.vue';
   export default {
  components: { panel1, panel2, panel3 },
      data() {
         return {

         };
      },
      onLoad() {

      },
      computed:{
        ...mapState('m_user',['userinfo']),
      },
      methods: {

      }
   };
</script>

<style scoped lang='scss'>
    .my-userinfo-container {
        height: 100%;
        // 为整个组件的结构添加浅灰色的背景
        background-color: #f4f4f4;
        .top-box {
            height: 400rpx;
            background-color: #c00000;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .avatar {
                display: block;
                width: 90px;
                height: 90px;
                border-radius: 45px;
                border: 2px solid white;
                box-shadow: 0 1px 5px black;
            }
            .nickname {
                color: white;
                font-weight: bold;
                font-size: 16px;
                margin-top: 10px;
            }
        }
    }
    

</style>